<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滨海基金 -客户列表</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>

<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="./css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

<link href="css/style.min.css?v=4.0.0" rel="stylesheet">
<script src="./js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="./js/img_upload.js"></script>
<script type="text/javascript" src="./js/fileUploadUtil.js"></script>

<script type="text/javascript"></script>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="./js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script type="text/javascript" src="js/common.js"></script>

<script type="text/javascript"
	src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<style type="text/css">
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}
/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}
</style>
</head>
<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>
						客户 <small>生日,信息</small>
					</h5>
					<div class="ibox-content">
						<c:if test="${isDept }">
							<select class="form-control" style="width: 250px; float: left;"
								id="company" onchange="Search()">
								<c:forEach var="dept" items="${dept }">
									<option value="${dept.deptId }">${dept.deptName }（${dept.remake }）</option>
								</c:forEach>
							</select>
						</c:if>
						<div class="input-group col-md-3"
							style="margin-top: 0px; positon: relative; float: left;">
							<input id="customerName" type="text" class="form-control "
								placeholder="请输入关键字（名称）"/ > <span
								class="input-group-btn">
								<button onclick="Search()" class="btn btn-info btn-search">查询</button>
							</span>
						</div>
						<table
							class="table table-striped table-bordered table-hover dataTables-example"
							id="dataTables-example">
							<thead>
								<tr style="height: 30px;">
									<th style="width: 50px" align="center">序号</th>
									<th style="width: 140px" align="center">名称</th>
									<th style="width: 100px" align="center">性别</th>
									<th style="width: 120px" align="center">客户类型</th>
									<th style="width: 150px" align="center">职业</th>
									<th style="width: 100px" align="center">生日</th>
									<th style="width: 180px" align="center">电话</th>
									<th style="width: 300px" align="center">地址</th>
									<th style="width: 100px" align="center">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- 详情模态框 -->
		<div class="modal fade  " id='detailModal'>
			<div class="modal-dialog" style="width: 1000px; height: 600px;">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss='modal'
							onclick="activityChange(2, 'detailActivityDiv', 'activityId')">×</button>

						<h2 class="modal-title" align="center">客户信息详情</h2>
					</div>

					<div class="modal-body" align="center">
						<form class="form-horizontal m-t" id="editForm"
							enctype="multipart/form-data">
							<div class="row form-body form-horizontal m-t">
								<div class="col-md-6 droppable sortable">
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">客户姓名： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="customerName"
												id="dcustomerName" class="form-control"> <input
												type="hidden" name="customerId" id="dcustomerId">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">性别： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="sex" id="dsex"
												class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">出生日期：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="date"
												id="dbirthday" class="form-control"
												onClick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd '})"
												readonly="true">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">籍贯：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="birthPlace"
												id="dbirthPlace" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">手机号码： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="mobileNumber"
												id="dmobileNumber" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">联系方式： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="otherLinks"
												id="dotherLinks" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">证件类型：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="idType" id="didType">
												<option value=""></option>
												<option value="0">身份证</option>
												<option value="1">军警证</option>
												<option value="2">护照</option>
												<option value="3">港澳通行证</option>
												<option value="4">其他</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">家庭住址： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="address"
												id="daddress" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">职业： </label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="profession"
												id="dprofession" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">客户类型： </label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control "
												name="customerType" id="dcustomerType">
												<option value=""></option>
												<option value="0">自然人</option>
												<option value="1">老总</option>
												<option value="2">部门经理</option>
												<option value="3">部门主管</option>
												<option value="4">普通员工</option>
												<option value="5">法人</option>
											</select>
										</div>
									</div>

								</div>
								<div class="col-md-6 droppable sortable">
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">婚姻状况：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="maritalStatus" id="dmaritalStatus">
												<option value=""></option>
												<option value="0">未婚</option>
												<option value="1">已婚</option>
												<option value="2">离异</option>
												<option value="3">丧偶</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">公司名称：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="company"
												id="dcompany" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">公司地址：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="companySite"
												id="dcompanySite" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">网址：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="url" id="durl"
												class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">学历：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="educationBackground" id="deducationBackground">
												<option value=""></option>
												<option value="0">大专</option>
												<option value="1">本科</option>
												<option value="2">硕士</option>
												<option value="3">博士</option>
												<option value="4">其他</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">证件号码：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="idNumber"
												id="didNumber" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">客户来源：</label>
										<div class="col-sm-8">
											<select disabled="disabled" class="form-control"
												name="customerSource" id="dcustomerSource">
												<option value=""></option>
												<option value="0">公海池</option>
												<option value="1">市场活动</option>
												<option value="2">录入客户</option>
											</select>
										</div>
									</div>
									<div class="form-group draggable" id="detailActivityDiv"
										style="display: none;">
										<label class="col-sm-3 control-label">来源活动：</label>
										<div class="col-sm-8">
											<select disabled="disabled" name="activityId"
												id="detailActivityId" class="form-control">
											</select>
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">座机号码：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="phone"
												id="dphone" class="form-control">
										</div>
									</div>
									<div class="form-group draggable">
										<label class="col-sm-3 control-label">传真号码：</label>
										<div class="col-sm-8">
											<input disabled="disabled" type="text" name="facsimile"
												id="efacsimile" class="form-control">
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer" align="center">
						<div align="center">
							<button class="btn btn-primary" onclick="closeModal(detailModal)">确认</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function FormatDate(date) {
			return date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
					+ date.getDate();
		}
		var table;
		$(function() {
			//提示信息
			var lang = {
				"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
				"sLengthMenu" : "每页 _MENU_ 项",
				"sZeroRecords" : "没有匹配结果",
				"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
				"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
				"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
				"sInfoPostFix" : "",
				"sSearch" : "搜索:",
				"sUrl" : "",
				"sEmptyTable" : "表中数据为空",
				"sLoadingRecords" : "载入中...",
				"sInfoThousands" : ",",
				"oPaginate" : {
					"sFirst" : "首页",
					"sPrevious" : "上页",
					"sNext" : "下页",
					"sLast" : "末页",
					"sJump" : "跳转"
				},
				"oAria" : {
					"sSortAscending" : ": 以升序排列此列",
					"sSortDescending" : ": 以降序排列此列"
				}
			};

			//初始化表格
			table = $("#dataTables-example")
					.dataTable(
							{

								"fnDrawCallback" : function() {
									var api = this.api();
									var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
									api.column(0).nodes().each(
											function(cell, i) {
												cell.innerHTML = startIndex + i
														+ 1;
											});
								},
								language : lang, //提示信息
								autoWidth : false, //禁用自动调整列宽
								stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
								processing : true, //隐藏加载提示,自行处理
								serverSide : true, //启用服务器端分页
								searching : false, //禁用原生搜索
								orderMulti : false, //启用多列排序
								order : [], //取消默认排序查询,否则复选框一列会出现小箭头
								renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
								pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
								"aLengthMenu" : [ 10 ],
								"bLengthChange" : false,//屏蔽tables的一页展示多少条记录的下拉列表
								ordering : false, //关闭排序图标
								ajax : function(data, callback, settings) {
									//封装请求参数
									var param = {};
									param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
									param.start = data.start;//开始的记录序号
									param.page = (data.start / data.length) + 1;//当前页码
									//param.darw=darw;  //计数器
									var customerName = $("#customerName").val()
											.trim();
									if (customerName != null
											&& customerName != "") {
										param.customerName = customerName
									}
									var company = $("#company").val();
									if (company != null && company != "") {
										param.deptId = company
									}
									//console.log(param);
									//ajax请求数据
									$
											.ajax({
												type : "POST",
												url : "customerBirthdayList.do",
												cache : false, //禁用缓存
												data : param, //传入组装的参数
												dataType : "json",
												success : function(result) {

													//console.log(result);
													//setTimeout仅为测试延迟效果
													setTimeout(
															function() {
																//封装返回数据
																var returnData = {};
																draw = result.draw;//后台返回的计数器
																returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
																returnData.recordsTotal = result.total;//返回数据全部记录
																returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
																returnData.data = result.data;//返回的数据列表

																//console.log(returnData);
																//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
																//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
																callback(returnData);
															}, 200);
												}
											});
								},
								//列表表头字段
								columns : [
										{
											"data" : null
										},
										{
											"data" : "customerName"
										},
										{
											"data" : "sex"
										},
										{
											"data" : function(data) {
												if (data.customerType == 0) {
													return "自然人";
												} else if (data.customerType == 1) {
													return "老总";
												} else if (data.customerType == 2) {
													return "部门经理";
												} else if (data.customerType == 3) {
													return "部门主管";
												} else if (data.customerType == 4) {
													return "普通员工";
												} else if (data.customerType == 5) {
													return "法人";
												}
											}
										},
										{
											"data" : "profession"
										},
										{
											"data" : function(data) {
												var date = new Date(
														data.birthday);
												return (date.getMonth() + 1)
														+ "-" + date.getDate();
											}
										},
										{
											"data" : "mobileNumber"
										},
										{
											"data" : function(data) {
												if (data.address.length > 20) {
													return data.address
															.substring(0, 20)
															+ "......";
												} else if (data.address.length < 20) {
													return data.address;
												} else {
													return "";
												}
											}
										}

								],
								columnDefs : [ {
									"targets" : [ 8 ], //第七列加一条 自定义列
									"data" : "customerId", //数据列名
									"render" : function(data, type, full) { //返回自定义的内容editCustomer

										return "<a class=\"btn btn-info btn-xs\"onclick=\"detailCustomer('"
												+ data + "')\">详细</a> ";
									}
								} ]
							})//.api();													
		})

		//详细查询数据事件
		function detailCustomer(id) {
			$("#detailModal").show();
			$
					.ajax({
						url : "editCustomer.do",
						data : {
							"id" : id
						},
						dataType : "json",
						type : "post",
						success : function(result) {
							if (result.flag == 1) {

								$("#dcustomerType").val(
										result.chance.customerType);
								$("#dcustomerName").val(
										result.chance.customerName);
								$("#dmobileNumber").val(
										result.chance.mobileNumber);
								$("#dcustomerId").val(result.chance.customerId);
								$("#dbirthPlace").val(result.chance.birthPlace);
								$("#daddress").val(result.chance.address);
								$("#dprofession").val(result.chance.profession);
								$("#dcompany").val(result.chance.company);
								$("#dcompanySite").val(
										result.chance.companySite);
								$("#durl").val(result.chance.url);
								$("#dotherLinks").val(result.chance.otherLinks);
								$("#didNumber").val(result.chance.idNumber);
								$("#dphone").val(result.chance.phone);
								$("#dfacsimile").val(result.chance.facsimile);
								$("#didType").val(result.chance.idType);
								$("#dmaritalStatus").val(
										result.chance.maritalStatus);
								$("#deducationBackground").val(
										result.chance.educationBackground);
								$("#dcustomerSource").val(
										result.chance.customerSource);
								$("#dsex").val(result.chance.sex);
								if (result.chance.activityId != null) {
									activityChange(1, "detailActivityDiv",
											"detailActivityId");
									$("#detailActivityId").val(
											result.chance.activityId);
								}
								var birthday = new Date(result.chance.birthday);//时间戳转换为java.util.date
								birthday = FormatDate(birthday);//抽取出来年月日
								$("#dbirthday").val(birthday);

								$("#detailModal").modal("show");
							} else if (result.flag == 0) {
								swal("异常", "暂无数据,请稍后再试!", "warning")
							}
						},
						error : function() {
							swal("错误", "系统异常,请稍后再试!", "error")
						}
					});
		}
		function Search() {
			/* var oSettings = table.fnSettings();  
			oSettings._iDisplayStart = 0;  
			table.fnDraw(oSettings);   */
			table.fnDraw();
		}
		function activityChange(value, activityDiv, activityId) {
			if (value == 1) {
				$("#" + activityDiv).show();
				$
						.ajax({
							url : "getActivityListInfo.do",
							dataType : "json",
							type : "post",
							success : function(result) {
								if (result.code == 0) {
									var da = result.data;
									var htmlText = "";
									for (var i = 0; i < da.length; i++) {
										htmlText += "<option  value='" + da[i].activityId + "'>"
												+ da[i].activityName
												+ "</option>";
									}
									$("#" + activityId).append(htmlText);
								} else {
									swal("服务器异常", "无法获取到活动信息,请稍后再试!", "warning")
								}
							},
							error : function() {
								swal("服务器异常", "无法获取到活动信息,请稍后再试!", "error")
							}
						});
			} else {
				$("#" + activityDiv).hide();
			}
		}
	</script>
</body>

</html>